<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定银行卡</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <style>

        .login-form {
            width: 90%;
            margin: 10px auto;
            margin-top: 40px;
        }

        #wrap {
            background: #F1F1F2;
        }

        .sub-login {
            width: 99%;
            height: 45px;
            opacity: 1;
            color: #fff;
            margin-top: 45px;
            text-align: center;
            line-height: 45px;
            border-radius: 40px;
            box-shadow: 0px 7px 30px 0px rgba(2, 176, 255, 0.2);
            background: -webkit-gradient(linear, 0 0%, 80% 100%, from(#E6615C), to(#B92D24));
        }

        .reg-form1 {
            height: 45px;
            line-height: 45px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .reg-form1 span {
            width: 70px;
            margin-left: 20px;
        }

        .reg-form1 .w100 {
            width: 100%;
            text-align: left;
        }

        .reg-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
        }

        .w80 {
            width: 80%;
        }

        .tixing {
            width: 100%;
            background: #EEEEEE;
            height: 45px;
            line-height: 45px;
            font-size: 12px;
            text-indent: 30px;
        }

        .chargesub {
            width: 80%;
            height: 50px;
            background: linear-gradient(90deg, rgba(169, 172, 255, 1), rgba(192, 124, 251, 1));
            box-shadow: 0px 9px 19px 0px rgba(187, 112, 255, 0.41);
            border-radius: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 18px;
            margin: auto;
        }

        .chargetype1 {
            width: 80%;
            height: 70px;
            color: #000000;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 10px;
            border: 1px solid #fff;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            position: relative;

        }

        .chargetype1.hover {
            border: 1px solid #dcbdfc;
        }

        .chargetype1.hover {

        }

        .chargetype1t {
            font-size: 18px;
            text-align: center;
            margin-bottom: 10px;
            color: #BB7FFA;
        }

        .chargetype1b {
            font-size: 14px;
            text-align: center;
        }

        .chargetype {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;

        }

        .paytype {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 30px;
        }

        .paytype i {
            font-size: 16px;
        }

        [v-cloak] {
            display: none;
        }

        .char {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .chargetype2t {
            font-size: 12px;
            color: #292929;
        }

        .bg2 {
            position: fixed;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(169, 172, 255, 1), rgba(192, 124, 251, 1)) !important;
        }

        .buybody2 {
            padding-top: 100px;
        }

        .buybody {
            width: 90%;
            margin: auto 5%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 16px 27px 0px rgba(148, 78, 209, 0.33);
            border-radius: 18px;
            padding-bottom: 20px;
        }

        .bzx {
            width: 70%;
        }

        .buybody h3 {
            width: 60%;
            margin: auto;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .buybody h3 span {
            font-size: 16px;
            font-family: SourceHanSansCN-Medium;
            font-weight: 500;
            color: rgba(187, 127, 250, 1);
            line-height: 17px;
            text-align: center;
            padding: 20px 20px;
            background: #fff;
            z-index: 1;
        }

        .bzx {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            border-bottom: 1px solid #FF4E79;
        }

        .checkeds {
            width: 30px;
            height: 20px;
            background: #bb7efa;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
        }

        .hover .checkeds {
            display: flex;
        }

        .checkeds i {
            font-size: 16px !important;
            color: #fff !important;
        }

        .paytypelist1 {
            width: 50%;

        }

        .paytype2 {
            width: 80%;
            height: 66px;
            border: 1px solid rgba(220, 220, 220, 1);
            border-radius: 12px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            font-size: 14px;
            color: #515151;
        }

        .paytype2 i {
            font-size: 23px;
        }

        .paytype2.hover {
            border: 1px solid rgba(187, 127, 250, 1);
        }
    </style>
</head>

<body>
<div v-cloak id="wrap" class="flex-wrap flex-vertical bg2">
    <header class="nobg noborder">
        <ul>
            <li class="active">
                <i onclick="back()" class="icon iconfont icon-back"></i>
                <span>会员充值</span>
            </li>
        </ul>
    </header>
    <div class="buybody2">
        <div class="buybody">
            <h3>
                <span>VIP收费标准</span>
                <div class="bzx"></div>
            </h3>

            <div class="chargetype">
                <div class="char" v-for="(item,index) in typelist">
                    <div class="chargetype1" @click="checktype(index)" :class="{hover:typelistcheck==index}">
                        <div class="chargetype1t">{{item.title}}</div>
                        <!--                    <div class="chargetype2t">{{item.desc}}</div>-->
                        <div class="chargetype2t">开通VIP享受会员权益</div>
                        <div class="checkeds"><i class="icon iconfont icon-xuanzhong"></i></div>
                    </div>
                </div>
            </div>
            <h3>
                <span>VIP收费方式</span>
                <div class="bzx"></div>
            </h3>
            <div class="paytype">
                <div class="paytypelist1" v-for="(item,index) in paytype" @click="paytypec(index)">
                    <div class="paytype2 checkedpay" v-if="paytypecheck!=index">
                        <i class="icon iconfont" :class="item.icon"></i>{{item.title}}

                        <div class="checkeds"><i class="icon iconfont icon-xuanzhong"></i></div>
                    </div>
                    <div class="paytype2 checkedpay hover" v-else>
                        <i class="icon iconfont" :class="item.icon"></i>{{item.title}}

                        <div class="checkeds"><i class="icon iconfont icon-xuanzhong"></i></div>
                    </div>
                </div>
            </div>
            <div class="login-form">
                <div class="chargesub" @click="paycharge">
                    确认充值
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script>
    var vm = new Vue({
        el: "#wrap",
        data: {
            userinfo: [],
            editAddress: false,
            userinfo2: [],
            bio: '',
            sfz: '',
            card: '',
            avatar: '',
            nickname: '',
            mobile: '',
            checked: 0,
            release: false,
            typelistcheck: 0,
            typelist: [],
            paytype: [
                {
                    id: 1,
                    title: '微信支付',
                    icon: 'icon-weixin1'
                },
                {
                    id: 2,
                    title: '支付宝支付',
                    icon: 'icon-zhifubao'
                },
            ],
            paytypecheck: 0,
            res: ''
        },
        mounted: function () {
            var that = this;

            apiready = function () {
                that.getcharge()
            };
        },
        methods: {

            paycharge: function () {
                var that = this;
                if (that.typelistcheck == 0) {
                    api.toast({msg: '请选择会员类型', location: 'middle'});
                }
                showProgress();
                var paytype = that.paytype[that.paytypecheck].id
                if (paytype == 1) {
                    that.wxPay()
                } else {
                    that.aliPay()
                }
            },
            getcharge: function () {
                var that = this;
                showProgress();
                var id = api.pageParam.name
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.buyvip,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                        }
                    }
                }, function (ret, err) {
                    if (ret.code == 1) {
                        api.hideProgress();
                        that.typelist = ret.data
                    } else {
                        api.hideProgress();
                        api.toast({msg: ret.msg, location: 'middle'});
                    }
                });
            },
            wxPay: function () {
                var that = this;
                showProgress();
                var amount = that.typelist[that.typelistcheck].amount
                var token = $api.getStorage('userInfo').token

                api.ajax({
                    url: ajaxRoute.charge,
                    // url: ajaxRoute.wxpay,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                            amount: amount,
                            paytype: that.paytype[that.paytypecheck].id,
                            viptype: that.typelistcheck + 1
                        }
                    }
                }, function (res, err) {
                    console.log(JSON.stringify(res))
                    console.log("11111微信充值测试");
                    api.hideProgress();
                    var wxPay = api.require('wxPay');
                    wxPay.payOrder(res, function (ret, err) {
                        console.log(JSON.stringify(ret))
                        console.log(JSON.stringify(err))
                        if (ret.status) {
                            if (ret.status) {
                                api.alert({
                                    title: '系统提示',
                                    msg: '充值成功',
                                }, function (ret, err) {
                                    if (ret) {
                                        api.sendEvent({
                                            name: 'charge',
                                        });
                                        back()
                                    }
                                });
                            } else {
                                if (err.code == '-2') {
                                    api.toast({
                                        msg: '用户取消'
                                    });
                                } else {
                                    api.toast({
                                        msg: '打赏失败'
                                    });
                                }
                            }
                        } else {
                            api.toast({msg: err.msg, location: 'middle'});
                        }
                    });
                })
            },
            aliPay: function () {
                var that = this;
                var amount = that.typelist[that.typelistcheck].amount
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.charge,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                            amount: amount,
                            paytype: that.paytype[that.paytypecheck].id,
                            viptype: that.typelistcheck + 1
                        }
                    },
                    dataType: 'text'
                }, function (res, err) {
                    api.hideProgress();
                    console.log(JSON.stringify(res));
                    var aliPayPlus = api.require('aliPayPlus');
                    console.log(aliPayPlus);
                    aliPayPlus.payOrder({
                        orderInfo: res
                    }, function (ret, err) {
                        if (ret.code == '9000') {
                            api.alert({
                                title: '系统提示',
                                msg: '充值成功',
                            }, function (ret, err) {
                                if (ret) {
                                    api.sendEvent({
                                        name: 'charge'
                                    });
                                    back()
                                }
                            });
                        } else if (ret.code == '8000') {
                            api.alert({
                                msg: '正在处理中，支付结果未知',
                                buttons: ['确定']
                            });
                        } else if (ret.code == '4000') {
                            // $("#alert-sign-fail").show();
                        } else if (ret.code == '5000') {
                            api.alert({
                                msg: '重复请求',
                                buttons: ['确定']
                            });
                        } else if (ret.code == '6001') {
                            api.alert({
                                msg: '用户中途取消支付操作',
                                buttons: ['确定']
                            });

                        } else if (ret.code == '6002') {
                            api.alert({
                                msg: '网络连接出错',
                                buttons: ['确定']
                            });

                        } else if (ret.code == '6004') {
                            api.alert({
                                msg: '支付结果未知',
                                buttons: ['确定']
                            });
                        }
                    });
                })

            },
            paytypec: function (e) {
                this.paytypecheck = e
            },
            checktype: function (e) {
                console.log(e)
                this.typelistcheck = e
            },
            bindCard: function () {
                var that = this;
                if (this.card.length < 16) {
                    api.toast({msg: '请输入正确的卡号', location: 'middle'});
                    return
                }
                showProgress();
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.bindbank,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                            bankaccount: that.card
                        }
                    }
                }, function (ret, err) {
                    if (ret.code == 1) {
                        api.hideProgress();
                        api.toast({msg: '绑定成功', location: 'middle'});
                    } else {
                        api.hideProgress();
                        api.toast({msg: ret.msg, location: 'middle'});
                    }
                });
            }
        },
        filters: {
            getTel: function (value) {
                var phone = value
                return phone.substr(0, 3) + "****" + phone.substr(7)
            },
            getCard: function (value) {
                var phone = value
                return phone.substr(0, 5) + "********" + phone.substr(12)
            },
            getchecked: function (e) {
                var checked = ''
                if (e == 0) {
                    checked = '审核中'
                } else {
                    checked = '已审核'
                }
                return checked
            }
        }
    })
</script>
